<template>
  <div class="wrapper">
    <div class="bg-white nav flex justify-center">
      <div style="width: 75%" class="flex justify-between items-center tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="`tab ${index == activeIndex ? 'active' : ''}`"
          @click="changeNav(index)"
        >
          {{ tab.title }}
        </div>
      </div>
    </div>
      <div v-if="showPage == 0">
        <shangdai-page />
      </div>
      <div v-else-if="showPage == 1">
        <gongjijin-page />
      </div>
      <div v-else-if="showPage == 2">
        <zuhe-page />
      </div>
  </div>
</template>
<script>
import shangdaiPage from "@/components/shangdaiPage";
import zuhePage from "@/components/zuhePage";
import gongjijinPage from "@/components/gongjijinPage";

// api/rate
// type: 1 || 2

export default {
  components: {
    shangdaiPage,
    zuhePage,
    gongjijinPage,
  },
  data() {
    return {
      showPage: 0,
      activeIndex: 0,
      tabs: [
        { title: "商业贷款", url: "daikuan" },
        { title: "公积金贷款", url: "gjj" },
        { title: "组合贷款", url: "zh" },
      ],
    };
  },
  created() {
    // this.$store.dispatch("wap/count/getSratelist")
  },
  mounted() {
    if (this.$route.params.id == "zh.html") {
      this.activeIndex = 1;
      this.showPage = 1;
    } else if (this.$route.params.id == "gjj.html") {
      this.activeIndex = 2;
      this.showPage = 2;
    } else if (this.$route.params.id == "daikuan.html") {
      this.activeIndex = 0;
      this.showPage = 0;
    }
  },
  methods: {
    //  切换贷款方式
    changeNav(index) {
      console.log(index);
      this.showPage = index;
      this.activeIndex = index;
    },
  },
};
</script>
<style lang="scss" scoped>
html,
.wrapper {
//   width: 100vw;
  height: 100vh;
  background-color: #eee;
}
.nav {
  height: 27px;
  padding:  20px 0px;
  .tab {
    font-size: 15px;
    color: #a6a6a6;
    letter-spacing: 0;
    text-align: center;
    padding-bottom: 5px;
  }

  .active {
    color: #1e1e1e;
    border-bottom: 2px solid #4687f2;
  }
}
</style>